<template>
  <div id="modelMapContainer" class="container">
  </div>
</template>

<script>
import * as THREE from "three";
import { TrackballControls } from "three/examples/jsm/controls/TrackballControls";
import { ColladaLoader } from "three/examples/jsm/loaders/ColladaLoader.js";

export default {
  data() {
    return {
      container: null,
      controls: null,
      camera: null,
      scene: null,
      rouletteScene: null,
      renderer: null,
    };
  },
  mounted() {
    this.initMap();
    this.animate();
  },
  methods: {
    initMap() {
      this.container = document.getElementById("modelMapContainer");

      this.scene = new THREE.Scene();

      const aspect = window.innerWidth/window.innerHeight;
      const D = 8;

      this.camera = new THREE.OrthographicCamera(-D*aspect, D*aspect, D, -D, 1, 1000);

      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, window.innerHeight);


      this.container.appendChild(this.renderer.domElement);

      const light = new THREE.DirectionalLight( 0xffffff, 2 );
      light.position.set( 100, 20, 15 );
      this.scene.add( light );

      this.camera.position.set(100,100,100);
      this.camera.lookAt(new THREE.Vector3(0,0,0));
      this.camera.rotation.z = 5/6*Math.PI;

      const loader = new ColladaLoader();
      loader.load("/object-map/scene.dae", (collada) => {
        this.rouletteScene = collada.scene;
        this.rouletteScene.scale.set(0.1,0.1,0.1);
        this.rouletteScene.position.set(5,5,5);
        this.scene.add(this.rouletteScene);
      }, function( xhr) {
        console.log((xhr.loaded/xhr.total * 100)+"% loaded");
      });

      window.addEventListener("resize", this.resize, false);
    },
    animate() {
      this.renderer.render(this.scene, this.camera);

      if( this.rouletteScene ){
        this.rouletteScene.rotation.z++;
      }

      requestAnimationFrame(this.animate);
    },
    resize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();

      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 0px;
  position: relative;
}
.container canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
</style>
